<template>
  <div class="nav_box">
    <Nav />
    <!-- <Menu /> -->
  </div>
  <!-- <img class="news-img" src="@/assets/info1.jpg" alt="" /> -->
  <div class="info-box">
    <h3 class="title">
      {{ info.smallTitle }}
    </h3>
    <div class="remark">
      {{
        info.articleSource == "owner"
          ? "来源： 教育教学评估中心（现代教育技术中心）"
          : info.articleSource == "zjut"
            ? " 来源：浙江工业大学官网"
            : ""
      }}
      &nbsp;&nbsp;&nbsp;日期:{{ info.createTime.slice(0, 10) }}
    </div>
    <div class="info">
      <QuillEditor
        v-model:content="infoitem"
        content-type="html"
        theme="snow"
      />
    </div>
    <!-- <img class="img" :src="img" alt="" /> -->
  </div>
  <Footer />
</template>
<script setup lang="ts">
import Nav from "../components/navBar.vue";
import Menu from "../components/menu.vue";
import Swiper from "../components/swiper1.vue";
import Footer from "../components/footer.vue";
import { onMounted, ref } from "vue";
import request from "@/request/request";
import { useRoute } from "vue-router";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
const route = useRoute();
const info = ref({
  articleContent: "",
  smallTitle: "",
  createTime: "",
  articleSource: "",
});
const infoitem = ref("");
onMounted(() => {
  getInfo(String(route.query.id));
});
const getInfo = (id: string) => {
  let data = new FormData();
  data.set("id", id);
  request("findCmsArticleDetails", "post", data).then((res: any) => {
    console.log(res);
    info.value = res.data;
    infoitem.value = res.data.articleContent.replace(
      /\/web-api\//g,
      "http://121.40.105.156:8088/"
    );
  });
};
</script>

<style lang="scss" scoped>
.nav_box {
  width: 100%;
  background-image: url("@/assets/na_bg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // margin-bottom: 0.625rem;
}
.news-img {
  width: 100%;
}
.info-box {
  width: 75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3.125rem;
  .title {
    font-size: 1.125rem;
    color: #182880;
  }
  .remark {
    font-size: 0.875rem;
    color: #787878;
    margin: 1.25rem 0;
    margin-bottom: 2.5rem;
  }
  .info {
    font-size: 1rem;
    line-height: 30px;
    letter-spacing: 0.125rem;
    font-size: 1.0625rem;
    min-height: 750px;
    p {
      margin-top: 0.9375rem;
    }
  }
}
img {
  width: 100% !important;
  margin-top: 80px;
}
.info::v-deep {
  .ql-toolbar.ql-snow {
    display: none;
  }
}
.info::v-deep {
  .ql-container {
    border: 0;
  }
}
</style>
